<template>
  <div class="root-wrap">
    <div class="ask">
      <NavBar title="箱件列表" left-text="" left-arrow></NavBar>
      <scroll>
        <ul>
          <li class="flex" v-for="(item,index) in 15" :key="index">
            <div>箱件A</div>
            <div>
              点击展开详情
              <div v-if="false">
                这里是详情
              </div>
            </div>
            <div>
              <div class="dian flex"></div><span>异常</span>
            </div>
          </li>
        </ul>
       </scroll>
    </div>
    <!-- footer -->
    <!-- <app-footer :current=1></app-footer> -->
  </div>
</template>
<script>
import AppFooter from "@/base/footer/footer";
import { askNavData } from '@/assets/js/data'
import { GET_ASK_QUESTION } from "@/api";
import { Dialog, NavBar } from "vant";
import { handleResponse, getLocalStorage } from "@/assets/js/common";
import Scroll from "@/base/scroll/scroll";
import config from '@/assets/js/config'

export default {
  data() {
    return {
      showPopup: false,
      categoryList: [],
      questionList: [],
      askNavData,
      currIndex: 0,
      page: 1,
      loading: false,
      finished: false,
      isLoading: false
    };
  },
  created() {
    this.token = getLocalStorage("token", "string");
    // this._reqQuestion()
  },
  mounted() {
    // this._setWidth();
    // this._initSlide()
    // this._initLoadMore()
  },
  components: {
    AppFooter,
    NavBar,
    Scroll
  },
  computed: {
    // 计算 1rem 对应的 font-size 值
    rem () {
      let winWidth = document.documentElement.clientWidth;
      if (winWidth < 414) {
        return 14
      } else if (winWidth < 768){
        return 16
      } else if (winWidth < 1024) {
        return 26
      } else {
        return 26
      }
    }
  },
  methods: {
    // 点击问题标题
    handleQuesClick (id) {
      this.$router.push(`/ask/details?id=${id}`)
    },
    // 处理发表问题
    handlePublishClick() {
      if (this.token) {
        this.$router.push("/ask/publish");
      } else {
        Dialog.confirm({
          title: "温馨提示",
          message: "登录后才能发表问题哦，老铁。",
          confirmButtonText: "去登陆"
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            console.log("已关闭");
          });
      }
    },
    // 处理点击导航
    handleNavClick (item, index) {
      this.currIndex = index
      this.page = 1
      this._reqQuestion()
    },
    // 根据状态请求问题
    _reqQuestion () {
      GET_ASK_QUESTION(this.page, this.currIndex).then(res => {
        handleResponse(res, () => {
          if (!res.data.length) {
            this.questionList = []
            return
          }
          // 判断是否还有数据
          if (res.data.length < config.limit) {
            this.finished = true
          }
          this.questionList = res.data
        })
      })
    },
    _setWidth() {
      let ul = this.$refs.navContent;
      this.children = ul.children;
      let width = 0;
      for (let i = 0; i < this.children.length; i++) {
        let w = this.children[i].clientWidth;
        width += w;
      }
      ul.style.width = width + "px";
    },
    _initSlide() {
      this.slide = new BScroll(this.$refs.navWrap, {
        scrollX: true,
        scrollY: false,
        click: true
      });
    },
    _onLoad() {      //上拉加载
      this.page ++
      this.loading = true
      GET_ASK_QUESTION(this.page, this.currIndex).then(res => {
        handleResponse(res, () => {
          this.questionList = this.questionList.concat(res.data)
          this.$toast('加载成功');
          this.loading = false;
          if (res.data.length < config.limit) {
            this.finished = true
          }
        })
      })
    },
    _onRefresh() {       //下拉刷新
      this.isLoading = true;
      this.page = 1
      GET_ASK_QUESTION(this.page, this.currIndex).then(res => {
        handleResponse(res, () => {
          if (!res.data.length) {
            this.questionList = []
            return
          }
          if (res.data.length >= config.limit) {
            this.finished = false
          } else {
            this.finished = true
          }
          this.questionList = res.data
          this.$toast('刷新成功');
          this.isLoading = false;
        })
      })
    },
    _initLoadMore () {
      let winHeight = document.documentElement.clientHeight
      // 设置滚动区域容器的高度
      this.$refs.loadMore.style.height = (winHeight - 43 - 50 - 4.4*this.rem - 50 - 12) + 'px'
    }
  }
};
</script>
<style lang="less" scoped>
ul{
  padding: 4.5rem 20px;
  li{
    div:nth-child(1){
      font-weight: 600;
    }
    border: solid 1px #f1f1f1;
    padding: 1rem;
    margin-bottom: .8rem;
    .dian{
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: red;
      margin-right: 5px;
    }
  }
}

.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content{
  padding-top: 2.3rem;
}

.ask {
  overflow: auto;
  color: red;
  .loadmore-box{
    overflow: auto;
  }
  .box {
    overflow: auto;
  }
  position: fixed;
  top: 0;
  bottom: 50px;
  width: 100%;
  .nav {
    ul {
      display: flex;
      line-height: 50px;
      li {
        padding-right: 1.2rem;
        a {
          white-space: nowrap;
          &.active {
            color: #e7bb70;
            text-decoration: underline;
          }
        }
      }
      li:first-child {
        padding-left: 1rem;
      }
    }
  }
  .ask-btn {
    height: 4.4rem;
    display: flex;
    align-items: center;
    a {
      display: block;
      width: 90%;
      height: 2.8rem;
      margin: 0 auto;
      background-color: #2a2e38;
      text-align: center;
      line-height: 2.8rem;
    }
  }
  .list-box {
    ul {
      li {
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        .title {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
          height: 20px;
          .icon {
            margin-right: 0.8rem;
            flex-shrink: 0;
            span {
              font-size: 0.8rem;
              padding: 1px 2px;
            }
            span:first-child {
              color: #ff8d64;
              border: 1px solid #ff8d64;
            }
            span:last-child {
              color: #4ac49d;
              border: 1px solid #4ac49d;
            }
          }
          a {
            display: block;
            white-space: nowrap;
            width: 100%;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .data {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
          .left {
            display: flex;
            align-items: center;
            img {
              width: 22px;
              height: 22px;
              border-radius: 100%;
            }
            span {
              margin-left: 6px;
            }
          }
          .right {
            display: flex;
            align-items: center;
            span,
            i {
              margin-left: 6px;
            }
            .reply {
              position: relative;
              top: -1px;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.van-dialog__header{
  color: #666;
}
</style>
